$(document).ready(function () {

    // 柱状图实例
    var e1 = echarts.init(document.getElementById('e1'));

    var arr = [];

    var option_e1 = {};

    //折线柱状图
    $.ajax('http://' + IPADDRESS + ':' + PORT + '/table/activityShow', {
        method: 'POST',
        contentType: 'application/json;charset=UTF-8',
        dataType: 'json'
    }).done(function (data) {
        arr = data.body;
        option_e1 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true},
                    left: '80%',
                }
            },
            legend: {
                data: ['活动数', '参与人次', '平均人次']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '活动数',
                    // min: 0,
                    // max: 50,
                    // interval: 10,
                    axisLabel: {
                        formatter: '{value} 个'
                    }
                },
                {
                    type: 'value',
                    name: '参与人次',
                    // min: 0,
                    // max: 25,
                    // interval: 5,
                    axisLabel: {
                        formatter: '{value} 人次'
                    }
                }
            ],
            series: [
                {
                    name: '活动数',
                    type: 'bar',
                    data: arr[0]
                },
                {
                    name: '参与人次',
                    type: 'bar',
                    data: arr[1]
                },
                {
                    name: '平均人次',
                    type: 'line',
                    yAxisIndex: 1,
                    data: arr[2]
                }
            ]
        };
        e1.setOption(option_e1);
    })


    // 饼图实例
    var e2 = echarts.init(document.getElementById('e2'));
    var option_e2 = {
        title: {
            text: '此处活动主题',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ["优惠券","积分","实物","谢谢惠顾"]
        },
        series: [
            {
                name: '人数',
                type: 'pie',
                radius: '80%',
                center: ['60%', '60%'],
                data: [
                    {value: 335, name: '优惠券'},
                    {value: 222, name: '积分'},
                    {value: 234, name: '实物'},
                    {value: 135, name: '谢谢惠顾'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    e2.setOption(option_e2);

})
